/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 个人信息
 */
import React, {Component} from "react";
import {
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    Image,
    View,
    ToastAndroid,
    ScrollView,
    Button,
    Text,
    TextInput
} from "react-native";
import ItemCell from "../../../widget/ItemCell";
import Separator from "../../../widget/Separator";
import * as QQ from "react-native-qqsdk";
// import * as WeChat from "react-native-wechat";
// import Alipay from "react-native-yunpeng-alipay";
import {NavigationActions} from "react-navigation";
import MineOrderScene from "../order/MineOrderScene";
import MineAvatorPhotoDialog from "../../../widget/dialog/MineAvatorPhotoDialog";
import MineNameDialog from "../../../widget/dialog/MineNameDialog";
import MineSexDialog from "../../../widget/dialog/MineSexDialog";


const {width} = Dimensions.get('window');
type Props = {
    navigation:any,
}
export default class UserinfoPage extends Component<State,Props> {

    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            avatarSource: require('../../../../res/img/ic_avatar_default.png'),
            showModal: false,
            showSharePop: false,//分享弹窗，默认不显示
            showPhoto:false,
            showName:false,
            name:'华生生',
            showSex:false,
            sex:'男',

        };
        WeChat.registerApp('wx58cb6a35958fc3b9')
    }



    /**
     * 修改生日
     */
    editBirth() {
        alert('birth!')
    }

    /**
     * 修改昵称
     */


    /**
     * 修改地址
     */
    editAddress() {
        const navigationAction = NavigationActions.navigate({
            routeName: 'addressScene',
            params: {},
        })
        this.props.navigation.dispatch(navigationAction)
    }

    qqLogin = async() => {
        try {
            await QQ.isQQClientInstalled()
            let result = await QQ.ssoLogin()
            alert('QQ登录结果 ' + JSON.stringify(result))
        } catch (error) {
            alert('QQ登录失败 ' + JSON.stringify(error))
        }
    }

    qqShareImage = async() => {
        try {
            const imgUrl = 'https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg'
            let result = await QQ.shareImage(imgUrl, '分享标题', '分享描述', QQ.shareScene.QQ)
            alert('QQ分享结果 ' + JSON.stringify(result))
        } catch (error) {
            alert('QQ分享失败 ' + JSON.stringify(error))
        }
    }

    qqShareImageZone = async() => {
        try {
            const imgUrl = 'https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg'
            let result = await QQ.shareImage(imgUrl, '分享标题', '分享描述', QQ.shareScene.QQZone)
            alert('QQ分享结果 ' + JSON.stringify(result))
        } catch (error) {
            alert('QQ分享失败 ' + JSON.stringify(error))
        }
    }

    wechatLogin = async() => {
        try {
            let isInstall = await WeChat.isWXAppInstalled()
            if (!isInstall) {
                throw new Error('微信未安装')
            }
            let result = await WeChat.sendAuthRequest('snsapi_userinfo')
            ToastAndroid.show(JSON.stringify(result.code), ToastAndroid.SHORT)
        } catch (error) {
            alert('微信登录失败 ' + JSON.stringify(error))
        }
    }

    wechatShareImageTimeline = async() => {
        try {
            const imgUrl = 'https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg'
            let result = await WeChat.shareToTimeline
            ({
                type: 'imageUrl',
                title: '分享标题',
                description: '分享文字',
                imageUrl: imgUrl,
            })
            alert('微信分享结果 ' + JSON.stringify(result))
        } catch (error) {
            alert('微信分享失败 ' + JSON.stringify(error))
        }
    }

    wechatShareImageSession = async() => {
        try {
            const imgUrl = 'https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg'
            let result = await WeChat.shareToSession
            ({
                type: 'imageUrl',
                title: '分享标题',
                description: '分享文字',
                imageUrl: imgUrl,
            })
            alert('微信分享结果 ' + JSON.stringify(result))
        } catch (error) {
            alert('微信分享失败 ' + JSON.stringify(error))
        }
    }

    wechatPay = async() => {
        // WeChat.pay(
        //     {
        //         partnerId: '',  // 商家向财付通申请的商家id
        //         prepayId: '',   // 预支付订单
        //         nonceStr: '',   // 随机串，防重发
        //         timeStamp: '',  // 时间戳，防重发
        //         package: '',    // 商家根据财付通文档填写的数据和签名
        //         sign: ''        // 商家根据微信开放平台文档对数据做的签名
        //     }
        // ).then((success) => {
        //     ToastAndroid.show(JSON.stringify(success), ToastAndroid.SHORT)
        // }).catch((error) => {
        //     ToastAndroid.show(JSON.stringify(error), ToastAndroid.SHORT)
        // })
    }

    AliPay = async(params) => {
        // try {
        //     let result = await Alipay.pay(params)
        // } catch (error) {
        //
        // }
    }

    /**
     * 视频播放
     * @returns {Promise.<void>}
     */
    playVideo = () => {
        const navigationAction = NavigationActions.navigate({
            routeName: 'videoScene',
            params: {},
        })
        this.props.navigation.dispatch(navigationAction)
    }
    mineOrder = () => {
        this.props.navigation.navigate('MineOrderScene')
    }

    _onModalClosed = () => {
        this.setState({showModal: false})
    };

    _renderContent = () => {
        return (
            <View style={styles.mymodal}>
                <Image style={{marginTop:8}} source={require('../../../../res/img/dialog/tip.png')}/>
                <Separator style={{marginTop:8}}/>
                <View>
                    <Text style={styles.inputTitle}>请输入收货地址</Text>
                    <Text style={styles.inputContent}>PLEASE ENTER YOUR RECEIVERING ADDRESS</Text>
                    <View style={styles.control_btn}>
                        <TouchableOpacity ref='confirm_btn' style={styles.touch_select_opacity}
                                          onPress={() => this.selectConfirm()}>
                            <Text style={styles.touch_select_text}>确定</Text>
                        </TouchableOpacity>
                        <TouchableOpacity ref='cancel_btn' style={styles.touch_un_select_opacity}
                                          onPress={() => this.selectCancel()}>
                            <Text style={styles.touch_un_select_text}>取消</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    };

    selectConfirm() {

        this.setState({showModal: false})

    }

    selectCancel() {

        this.setState({showModal: false})

    }


    renderView() {
        return (
            <ScrollView>
                <View style={{flex:1,backgroundColor:'#f3f3f3'}}>

                    <TouchableOpacity onPress={()=>this.setState({showPhoto: true})}>
                        <View style={[styles.avertStyle]}>
                            <Text style={styles.title_left}>头像</Text>
                            <View style={{ flex: 1, backgroundColor: 'blue' }}/>
                            <Image source={this.state.avatarSource}
                                   style={{width: 46, height: 46, borderRadius: 23}}/>
                            <Image style={styles.arrow} source={require('../../../../res/img/icon_arrow.png')}/>
                        </View>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={()=>this.setState({showName: true})}>
                        <ItemCell title='昵称' subtitle={this.state.name}/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={()=>this.editBirth()}>
                        <ItemCell title='生日'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={()=>this.editAddress()}>
                        <ItemCell title='地址' subtitle='添加/修改/删除'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.qqShareImage}>
                        <ItemCell title='分享图片给好友'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.qqShareImageZone}>
                        <ItemCell title='分享图片到QQ空间'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.qqLogin}>
                        <ItemCell title='QQ登录'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.wechatShareImageSession}>
                        <ItemCell title='微信分享给朋友'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.wechatShareImageTimeline}>
                        <ItemCell title='微信分享到朋友圈'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.wechatLogin}>
                        <ItemCell title='微信登录'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.wechatPay}>
                        <ItemCell title='微信支付'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.AliPay}>
                        <ItemCell title='支付宝支付'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.playVideo}>
                        <ItemCell title='视频播放'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={this.mineOrder}>
                        <ItemCell title='我的订单'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('dialogScene')}>
                        <ItemCell title='弹窗'/>
                    </TouchableOpacity>
                    <Separator/>
                    <MineAvatorPhotoDialog show={this.state.showPhoto} avatar={this.state.avatarSource} callbackAvatar={(avatar)=>{
                        this.setState({avatarSource: avatar})
                    }} closeModal={(show) => {
                        this.setState({showPhoto: show})
                    }} {...this.props}/>
                    <MineNameDialog show={this.state.showName} name={this.state.name} closeModal={(show) => {
                        this.setState({showName: show})
                    }} callbackName={(text)=>{this.setState({name: text})}} {...this.props}/>
                    <MineSexDialog show={this.state.showSex} sex={this.state.sex} closeModal={(show) => {
                        this.setState({showSex: show})
                    }} callbackSex={(text)=>{this.setState({sex: text})}} {...this.props}/>
                </View>
            </ScrollView>
        )
    }

    render() {
        return (
            <View style={styles.flexStyle}>
                {this.renderView()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flexStyle: {
        flex: 1,
        width: width,
        flexDirection: 'column',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    avertStyle: {
        paddingTop: 5,
        paddingBottom: 5,
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 15,
        paddingRight: 10,
    },
    arrow: {
        width: 14,
        height: 14,
        marginLeft: 5,
    },
    mymodal: {
        backgroundColor: '#FAFAFA',
        height: 139,
        width: 261,
        alignItems: 'center',
        borderRadius: 20,
    },
    inputTitle: {
        color: '#5B5B5B',
        alignItems: 'center',
        fontSize: 13,
        fontWeight: 'bold',
        textAlign: 'center',
        justifyContent: 'center',
        marginTop: 8
    },
    inputContent: {
        color: '#767474',
        textAlign: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 9,
    },
    control_btn: {
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        backgroundColor: '#2B3543',
        borderRadius: 20,
        height: 40,
        width: 180,
        marginTop: 5,
    },
    touch_un_select_opacity: {
        width: 80,
        marginLeft: 3,
        backgroundColor: '#252E3B',
        height: 30,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: '#353D49',
        alignItems: 'center',
        justifyContent: 'center',
    },
    touch_un_select_text: {
        color: 'rgba(255,255,255,0.5)',
        fontSize: 11,
    },
    touch_select_opacity: {
        width: 80,
        marginLeft: 3,
        backgroundColor: '#DB3843',
        height: 30,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: '#DB3843',
        alignItems: 'center',
        justifyContent: 'center',
    },
    touch_select_text: {
        color: '#FFFFFF',
        fontSize: 11,
    },
    title_left:{
        fontSize:14,
        color:'black',
        fontWeight:'bold',
    },

});




